<template>
	<view class="MenuTab">
		<view  :class="$store.state.menuListIdx == idx ? 'sel-MenuTab-item' : 'MenuTab-item' " v-for="(item,idx) in menuList" @click="selTab(item,idx)">
			<view class="inner-item">
				<view class="icon" :style="{backgroundImage:`url(${$store.state.menuListIdx == idx ? item.optIcon : item.defIcon})`}"></view>
				<view :style="$store.state.menuListIdx == idx ?  optColor : defColor" class="name">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,mapActions,mapMutations
	} from 'vuex';
export default {
	data() {
		return {
			menuList:[],
			menuListIdx:0,
		};
	},
	props: {
		optColor:{
			type: Object,
			default: ()=>({
				color:"#0a7cfc"
			})
		},
		defColor:{
			type: Object,
			default: ()=>({
				color:"#0a7cfc",
				opacity:0.5
			})
		},
	},
	mounted() {
		this.menuList = this.$store.state.menuList;
	},
	methods: {
		selTab(item,idx) {
			this.menuListIdx = idx;
			this.$store.commit({
			    type:'saveData',
			    payload:{
			        menuListIdx:idx,
			    },
				callback:(state)=>{
				}
			})
			this.navTo(item.url,item.params)
		}
	}
};
</script>

<style lang="scss">
.MenuTab{
	&:before{
	content: "";
    width: 100%;
    height: 100%;
    position: absolute;
	
	}
	background-color: #fff;
	position:fixed;
	bottom:0;
	width: 100%;
	height:98rpx;
	border-top: 1rpx solid #e9e9e9;
	display: flex;
	flex-flow:row nowrap;
	.sel-MenuTab-item,.MenuTab-item{
		flex:1;
		position: relative;
	}
	.inner-item{
		position: absolute;
		width: 100%;
		top:50%;
		transform: translateY(-50%);
		.icon{
			margin:0 auto;
			background-size: 100%;
			background-repeat: no-repeat;
			width: 40rpx;
			height: 35rpx;
		}
		.name{
			text-align: center;
		}
	}
}
</style>
